<template>
  <div class="app-container">
    <div style="margin-bottom: 10px;" v-loading="loading">
    <el-form :model="userInfoForm" status-icon label-width="100px"
      class="demo-ruleForm">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="balance_information">
            <div class="banlance">可结算货款</div>
            <div class="total" v-if="userInfoForm.wallet">{{ userInfoForm.wallet.balance_summary }} <span
                class="num"></span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="balance_information point">
            <div class="banlance">待结算货款</div>
            <div class="total" v-if="userInfoForm.wallet">{{ userInfoForm.wallet.points_summary }} <span
                class="num"></span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="balance_information vouber">
            <div class="banlance">可用提货券</div>
            <div class="total" v-if="userInfoForm.wallet">{{ userInfoForm.wallet.coupon_summary }} <span
                class="num"></span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="balance_information coupons">
            <div class="banlance">累计提货券消费</div>
            <div class="total" v-if="userInfoForm.wallet">{{ userInfoForm.wallet.xx_summary }} <span
                class="num"></span></div>
          </div>
        </el-col>

      </el-row>
    </el-form>

    </div>
  </div>
</template>

<script>
  import {
    getOrderList,
  } from "@/api/order/index";
  export default {
    name: "merchantFinance",
    components: {

    },
    data() {
      return {
        loading:false,
        mer_id:'',
        userInfoForm:{
          wallet:{
            balance_summary:10,
            points_summary:50,
            coupon_summary:1500,
            xx_summary:50
          }
        }
      };
    },

    mounted() {},
    methods: {

      //产品列表
      getlist(id) {
        return
        this.loading = true;
        this.mer_id = id
        getOrderList().then((res) => {
          this.loading = false;
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .balance_information {
    background:linear-gradient(to right,#83bfff,#98ccff);
    padding: 14px 20px;
    border-radius: 10px;

    .banlance {
      color: #fff;
      font-size: 14px;
      line-height: 28px;
      font-weight: 550;
    }

    .total {
      color: #fff;
      font-size: 18px;
      line-height: 34px;
      font-weight: 550;
    }

    .num {
      color: #fff;
      font-size: 14px;
      font-weight: 550;
    }

  }
  .vouber {
    background:linear-gradient(to right,#6a942c,#7eaf35) !important;
  }

  .coupons {
    background:linear-gradient(to right,#b582f6,#8249d3) !important;
  }

  .point {
    background:linear-gradient(to right,#febe6a,#f4ae57) !important;
  }
</style>
